<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>第五元素购物</title>
<link rel="stylesheet" href="../../css/register.css" type="text/css"
	media="all" />
</head>
<body>
	<!-- 1.工具栏-->
	<div id="toolbar">
		<div id="div_1">
			<!-- 欢迎语-->
			<div id="d1_welcom">
				<span>欢迎来第五元素购物商城!</span>
			</div>
			<!-- 功能按钮-->
			<div id="d1_login">
				<ul>
					<li><a href="login.html">[登录]</a></li>
					<li><img src="../../images/welcom_1.gif" alt="" /></li>
					<li><a href="register.html">[免费注册]</a></li>
					<li><img src="../../images/welcom_1.gif" alt="" /></li>
					<li><a href="">我的订单</a></li>
					<li><img src="../../images/welcom_1.gif" alt="" /></li>
					<li><a href="">购物车0件</a></li>
				</ul>
			</div>

		</div>

	</div>

	<!-- 2.图片 -->
	<div id="div_2">

		<img src="../../images/img.gif" alt="" />

	</div>

	<!--3. logo-->
	<div id="div_3">
		<div id="d3_logo">
			<img src="../../images/logo.gif" alt="" />
		</div>

		<div id="d3_find">
			<ul id="d3_ul1">
				<li><input type="text" name="输入" /></li>
				<li><a href="">搜索</a></li>
			</ul>
			<ul id="d3_ul2">
				<li><a href="">电脑数码</a></li>
				<li><a href="">家电通讯</a></li>
				<li><a href="">丽人专区</a></li>
				<li><a href="">名仕专区</a></li>
				<li><a href="">生活专区</a></li>
				<li><a href="">图书音像</a></li>

			</ul>
		</div>

	</div>

	<!--4.导航-->
	<div id="div_4">
		<div id="d4_ng">
			<ul>
				<li><a href="">全部商品分类</a></li>
				<li><a href="Index.html">首页</a></li>
				<li><a href="">论坛</a></li>
				<li><a href="">留言板</a></li>
				<li><a href="">团购</a></li>
				<li><a href="">在线游戏</a></li>
			</ul>
		</div>
	</div>
	<!--5.中间代码部分-->
	<div id="center">
		<form action="../../UserRegister" method="post" name="form1">
			<div class="center_item">
				<label class="center_item_label">用户名:</label> <input type="text"
					class="center_item_text" name="name" id="name"></input> <span
					class="valid"></span>
				<p class="zhushi">用户名必须在四到二十个字符之间</p>
			</div>
			<div class="center_item">
				<label class="center_item_label">昵称:</label> <input type="text"
					class="center_item_text" name="nick" id="nick"></input> <span
					class="valid"></span>
				<p class="zhushi">昵称最大长度不超过六个字符</p>
			</div>
			<div class="center_item">
				<label class="center_item_label">密码:</label> <input type="password"
					class="center_item_text" name="password" id="password"></input> <span
					class="valid"></span>
				<p class="zhushi">密码是6-18位的大小写字母以及数字组成的</p>
			</div>
			<div class="center_item">
				<label class="center_item_label">确认密码:</label> <input
					type="password" class="center_item_text" name="doublepassword"
					id="doublepassword"></input> <span class="valid"></span>
				<p class="zhushi">确认密码必须和密码是相同的</p>
			</div>
			<div class="center_item">
				<label class="center_item_label">邮箱：</label> <input type="text"
					class="center_item_text" name="email" id="email"></input> <span
					class="valid"></span>
				<p class="zhushi">邮箱必须以@qq.com或者163.com结束</p>
			</div>
			<div class="center_item">
				<label class="center_item_label">联系电话:</label> <input type="text"
					class="center_item_text" name="telphone" id="telphone"></input> <span
					class="valid"></span>
				<p class="zhushi">联系电话必须为十一位数字</p>
			</div>
			<div class="center_item">
				<input type="submit" class="center_item_button" id="button1"
					value="注册" onclick="check()"></input> <input type="reset"
					class="center_item_button" id="button2" value="取消"></input>
			</div>
		</form>
	</div>
	<!--6.底部代码-->
	<div id="Footer">
		<p>第五元素制作</p>
		<p>制作交流QQ群:259772627</p>
	</div>

	<script type="text/javascript">
	<!--姓名验证部分-->
		var txtName = document.getElementById("name");
		var spanName = txtName.parentNode.getElementsByTagName("span")[0];

		txtName.onfocus = function() {

			spanName.innerHTML = "";
			spanName.className = "valid";
		};
		txtName.onblur = function() {

			getname = txtName.value;
			if (getname.length == 0) {
				spanName.innerHTML = "名字是必填的";
				spanName.className = "valid error";
				return;
			}
			if (getname.length > 20) {
				spanName.innerHTML = "名字最多20个字符";
				spanName.className = "valid error";
				return;
			}
			if (getname.length < 4) {
				spanName.innerHTML = "名字最少4个字符";
				spanName.className = "valid error";
				return;
			}
			spanName.innerHTML = "&nbsp;";
			spanName.className = "valid right";
		};

		var txtNiCk = document.getElementById("nick");
		var spanNiCk = txtNiCk.parentNode.getElementsByTagName("span")[0];

		txtNiCk.onfocus = function() {

			spanNiCk.innerHTML = "";
			spanNiCk.className = "valid";
		};
		txtNiCk.onblur = function() {
			var getnick = txtNiCk.value;

			if (getnick.length == 0) {
				spanNiCk.innerHTML = "昵称是必填的";
				spanNiCk.className = "valid error";
				return;
			}
			if (getnick.length > 8) {
				spanNiCk.innerHTML = "昵称最多8个字符";
				spanNiCk.className = "valid error";
				return;
			}
			spanNiCk.innerHTML = "&nbsp;";
			spanNiCk.className = "valid right";
		};

		var txtpassword = document.getElementById("password");
		var spanpassword = txtpassword.parentNode.getElementsByTagName("span")[0];
		var pwd = null;

		txtpassword.onfocus = function() {

			spanpassword.innerHTML = "";
			spanpassword.className = "valid";
		};
		txtpassword.onblur = function() {
			pwd = txtpassword.value;

			if (pwd.length == 0) {
				spanpassword.innerHTML = "密码是必填的";
				spanpassword.className = "valid error";
				return;
			}

			var pwdReg = /^[A-Za-z0-9]{6,18}$/;
			if (!pwdReg.test(pwd)) {
				spanpassword.innerHTML = "密码只能是6-18位英文或数字";
				spanpassword.className = "valid error";
				return;
			}

			spanpassword.innerHTML = "&nbsp;";
			spanpassword.className = "valid right";
		};

		var txtdoublepassword = document.getElementById("doublepassword");
		var spandoublepassword = txtdoublepassword.parentNode
				.getElementsByTagName("span")[0];

		txtdoublepassword.onfocus = function() {

			spandoublepassword.innerHTML = "";
			spandoublepassword.className = "valid";
		};

		txtdoublepassword.onblur = function() {
			Dpwd = txtpassword.value;
		};
		txtdoublepassword.onblur = function() {
			var Dpwd = txtdoublepassword.value;
			if (Dpwd.length == 0) {
				spandoublepassword.innerHTML = "确认密码必须填";
				spandoublepassword.className = "valid error";
				return;
			}
			if (!(Dpwd.equals(pwd))) {
				spandoublepassword.innerHTML = "确认密码错误";
				spandoublepassword.className = "valid error";
				return;
			}

			spandoublepassword.innerHTML = "&nbsp;";
			spandoublepassword.className = "valid right";
		};

		var txtemail = document.getElementById("email");
		var spanemail = txtemail.parentNode.getElementsByTagName("span")[0];

		txtemail.onblur = function() {

			spanemail.innerHTML = "";
			spanemail.className = "valid";
		};
		txtemail.onblur = function() {
			var email = txtemail.value;

			if (email.length == 0) {
				spanemail.innerHTML = "Email是必填的";
				spanemail.className = "valid error";
				return;
			}

			var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			if (!emailReg.test(email)) {
				spanemail.innerHTML = "不正确的Email格式";
				spanemail.className = "valid error";
				return;
			}

			spanemail.innerHTML = "&nbsp;";
			spanemail.className = "valid right";
		};

		var txttelphone = document.getElementById("telphone");
		var spantelphone = txttelphone.parentNode.getElementsByTagName("span")[0];

		txttelphone.onblur = function() {

			spantelphone.innerHTML = "";
			spantelphone.className = "valid";
		};
		txttelphone.onblur = function() {
			var telphone = txttelphone.value;

			if (telphone.length == 0) {
				spantelphone.innerHTML = "telphone是必填的";
				spantelphone.className = "valid error";
				return;
			}
			var telphoneReg = /^[0-9]{11}$/;
			if (!telphoneReg.test(telphone)) {
				spantelphone.innerHTML = "不正确的telphone格式";
				spantelphone.className = "valid error";
				return;
			}

			spantelphone.innerHTML = "&nbsp;";
			spantelphone.className = "valid right";
		};

		function check() {

			var pwdReg = /^[A-Za-z0-9]{6,18}$/;
			var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			var telphoneReg = /^[0-9]{11}$/;
			if

			(document.form1.name.value == ""
					|| document.form1.name.value.length > 18
					|| document.form1.name.value.length < 4) {
				window.alert("您的注册信息存在错误，请检查");
				return false;
			}
			if (document.form1.nick.value == ""
					|| document.form1.nick.value.length > 8) {
				window.alert("您的注册信息存在错误，请检查");
				return false;
			}
			if (document.form1.password.value == "" || !(pwdReg.test

			(document.form1.password.value))) {
				window.alert("您的注册信息存在错误，请检查");
				return false;
			}
			if (document.form1.doublepassword.value == ""
					|| document.form1.doublepassword.value != document.form1.password.value) {
				window.alert("您的注册信息存在错误，请检查");
				return false;
			}
			if (document.form1.email.value == ""
					|| !(emailReg.test(document.form1.email.value))) {
				window.alert("您的注册信息存在错误，请检查");
				return false;
			}
			if (document.form1.telphone.value == "" || !(telphoneReg.test

			(document.form1.telphone.value))) {
				window.alert("您的注册信息存在错误，请检查");
				return false;
			}
			return true;
		}
		var button2 = document.getElementById("button2");
		button2.addEventListener("mouseclick", "index.jsp", true);
	</script>
</body>
</html>